<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>消息详情 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 通用样式变量 */
    :root {
      --primary: #4263EB;
      --primary-light: #E8F0FE;
      --secondary: #6B7280;
      --success: #10B981;
      --warning: #FBBF24;
      --danger: #EF4444;
      --light: #F3F4F6;
      --dark: #1F2937;
      --white: #FFFFFF;
      --gray: #9CA3AF;
      --border: #E5E7EB;
      --shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #F9FAFB;
      color: var(--dark);
      margin: 0;
      height: 100vh;
      overflow-x: hidden;
    }
    
    /* 页面容器 */
    .message-container {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    /* 顶部导航 */
    .page-header {
      background-color: var(--white);
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
      position: relative;
      z-index: 10;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .header-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    /* 消息内容区域 */
    .message-content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
    
    /* 消息主体 */
    .message-post {
      background-color: var(--white);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: var(--shadow);
    }
    
    .message-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .post-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .post-author {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 2px;
    }
    
    .post-time {
      font-size: 12px;
      color: var(--gray);
    }
    
    .post-content {
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 12px;
    }
    
    .post-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 12px;
    }
    
    .post-actions {
      display: flex;
      justify-content: space-between;
      padding-top: 8px;
      border-top: 1px solid var(--border);
    }
    
    .post-action {
      display: flex;
      align-items: center;
      color: var(--secondary);
      font-size: 14px;
      background: none;
      border: none;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 4px;
    }
    
    .post-action:hover {
      background-color: var(--light);
    }
    
    /* 回复区域 */
    .replies-section {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    
    .replies-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .reply-item {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }
    
    .reply-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    
    .reply-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    .reply-content {
      flex: 1;
    }
    
    .reply-header {
      display: flex;
      align-items: center;
      margin-bottom: 4px;
    }
    
    .reply-author {
      font-weight: 600;
      font-size: 14px;
      margin-right: 8px;
    }
    
    .reply-time {
      font-size: 12px;
      color: var(--gray);
    }
    
    .reply-text {
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 8px;
      background-color: var(--light);
      padding: 8px 12px;
      border-radius: 8px;
    }
    
    .reply-actions {
      display: flex;
      gap: 16px;
    }
    
    .reply-action {
      display: flex;
      align-items: center;
      color: var(--secondary);
      font-size: 12px;
      background: none;
      border: none;
      gap: 4px;
    }
    
    /* 回复输入区域 */
    .reply-input-area {
      padding: 12px 16px;
      background-color: var(--white);
      border-top: 1px solid var(--border);
    }
    
    .reply-input-container {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    
    .reply-input-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
    }
    
    .reply-input-wrapper {
      flex: 1;
    }
    
    .reply-input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 10px 16px;
      font-size: 15px;
      resize: none;
      min-height: 44px;
      max-height: 120px;
      outline: none;
    }
    
    .reply-input:focus {
      border-color: var(--primary);
    }
    
    .reply-input-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 8px;
      gap: 8px;
    }
    
    .cancel-reply {
      background: none;
      border: none;
      color: var(--secondary);
      font-size: 14px;
      padding: 6px 12px;
    }
    
    .send-reply {
      background-color: var(--primary);
      color: white;
      border: none;
      border-radius: 16px;
      padding: 6px 16px;
      font-size: 14px;
      font-weight: 500;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1001;
      background: white;
      border-radius: 20px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 风格1：默认蓝 */
    #style1 .post-action.active,
    #style1 .reply-action.active {
      color: var(--primary);
    }
    
    #style1 .send-reply {
      background-color: var(--primary);
    }
    
    /* 风格2：卡片式 */
    #style2 {
      --shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    
    #style2 body {
      background-color: #F0F2F5;
    }
    
    #style2 .message-post {
      border-radius: 16px;
      box-shadow: var(--shadow);
    }
    
    #style2 .reply-text {
      background-color: var(--white);
      border: 1px solid var(--border);
    }
    
    #style2 .reply-input {
      background-color: var(--white);
    }
    
    /* 风格3：深色模式 */
    #style3 {
      --dark: #F3F4F6;
      --white: #1F2937;
      --border: #374151;
      --gray: #9CA3AF;
      --light: #374151;
      --primary-light: #2D3748;
    }
    
    #style3 body {
      background-color: #111827;
      color: var(--dark);
    }
    
    #style3 .page-header,
    #style3 .message-post,
    #style3 .reply-input-area,
    #style3 .style-switcher {
      background-color: var(--white);
    }
    
    #style3 .reply-text {
      background-color: var(--light);
    }
    
    #style3 .post-action,
    #style3 .reply-action,
    #style3 .cancel-reply {
      color: var(--gray);
    }
    
    /* 风格4：简约风格 */
    #style4 {
      --primary: #374151;
      --border: #E9ECEF;
    }
    
    #style4 .message-post {
      border-radius: 8px;
      box-shadow: none;
      border: 1px solid var(--border);
    }
    
    #style4 .reply-text {
      border-radius: 4px;
      padding: 6px 10px;
    }
    
    #style4 .reply-input {
      border-radius: 8px;
      padding: 8px 12px;
    }
    
    #style4 .send-reply {
      border-radius: 4px;
      background-color: var(--primary);
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">风格1</button>
    <button class="style-btn" data-style="style2">风格2</button>
    <button class="style-btn" data-style="style3">风格3</button>
    <button class="style-btn" data-style="style4">风格4</button>
  </div>
  
  <!-- 页面容器 -->
  <div class="message-container">
    <!-- 风格1：默认蓝 -->
    <div id="style1" class="page-style active">
      <!-- 顶部导航 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn1">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">消息详情</h1>
        <button class="header-btn" id="moreBtn1">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
      
      <!-- 消息内容区域 -->
      <div class="message-content" id="messageContent1">
        <!-- 消息主体 -->
        <div class="message-post">
          <div class="message-header">
            <img src="https://picsum.photos/100/100?random=1" alt="头像" class="post-avatar">
            <div>
              <div class="post-author">张小明</div>
              <div class="post-time">今天 09:30</div>
            </div>
          </div>
          
          <div class="post-content">
            大家觉得这个新设计的产品logo怎么样？我花了一周时间修改了几个版本，这个是我比较满意的一个。主要想突出简约和现代感，同时保留我们品牌的核心元素。
          </div>
          
          <img src="https://picsum.photos/600/300?random=10" alt="消息图片" class="post-image">
          
          <div class="post-actions">
            <button class="post-action">
              <i class="fa fa-thumbs-o-up"></i> 点赞 (12)
            </button>
            <button class="post-action reply-btn" data-style="1">
              <i class="fa fa-reply"></i> 回复 (5)
            </button>
            <button class="post-action">
              <i class="fa fa-share"></i> 分享
            </button>
          </div>
          
          <!-- 回复区域 -->
          <div class="replies-section">
            <div class="replies-title">
              <i class="fa fa-comments-o"></i> 查看回复
            </div>
            
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=2" alt="头像" class="reply-avatar">
              <div class="reply-content">
                <div class="reply-header">
                  <span class="reply-author">王芳</span>
                  <span class="reply-time">今天 10:15</span>
                </div>
                <div class="reply-text">
                  这个设计比上一版好多了，颜色搭配也更协调。我觉得这个可以作为最终版本使用。
                </div>
                <div class="reply-actions">
                  <button class="reply-action">
                    <i class="fa fa-thumbs-o-up"></i> 3
                  </button>
                  <button class="reply-action reply-to-reply" data-style="1">
                    <i class="fa fa-reply"></i> 回复
                  </button>
                </div>
              </div>
            </div>
            
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=3" alt="头像" class="reply-avatar">
              <div class="reply-content">
                <div class="reply-header">
                  <span class="reply-author">李华</span>
                  <span class="reply-time">今天 11:02</span>
                </div>
                <div class="reply-text">
                  我觉得字体可以再调整一下，现在的字体有点太圆润了，不够锐利。整体风格还是不错的！
                </div>
                <div class="reply-actions">
                  <button class="reply-action">
                    <i class="fa fa-thumbs-o-up"></i> 1
                  </button>
                  <button class="reply-action reply-to-reply" data-style="1">
                    <i class="fa fa-reply"></i> 回复
                  </button>
                </div>
              </div>
            </div>
            
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=1" alt="头像" class="reply-avatar">
              <div class="reply-content">
                <div class="reply-header">
                  <span class="reply-author">张小明</span>
                  <span class="reply-time">今天 11:30</span>
                </div>
                <div class="reply-text">
                  @李华 谢谢你的建议，我会尝试调整一下字体看看效果
                </div>
                <div class="reply-actions">
                  <button class="reply-action">
                    <i class="fa fa-thumbs-o-up"></i> 0
                  </button>
                  <button class="reply-action reply-to-reply" data-style="1">
                    <i class="fa fa-reply"></i> 回复
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 回复输入区域 -->
      <div class="reply-input-area">
        <div class="reply-input-container">
          <img src="https://picsum.photos/100/100?random=9" alt="我的头像" class="reply-input-avatar">
          <div class="reply-input-wrapper">
            <textarea class="reply-input" placeholder="写下你的回复..." id="replyInput1"></textarea>
            <div class="reply-input-actions">
              <button class="cancel-reply" id="cancelReply1">取消</button>
              <button class="send-reply" id="sendReply1">回复</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格2：卡片式 -->
    <div id="style2" class="page-style">
      <!-- 顶部导航 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn2">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">消息详情</h1>
        <button class="header-btn" id="moreBtn2">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
      
      <!-- 消息内容区域 -->
      <div class="message-content" id="messageContent2">
        <!-- 消息主体 -->
        <div class="message-post">
          <div class="message-header">
            <img src="https://picsum.photos/100/100?random=4" alt="头像" class="post-avatar">
            <div>
              <div class="post-author">技术部公告</div>
              <div class="post-time">昨天 15:20</div>
            </div>
          </div>
          
          <div class="post-content">
            本周六（6月15日）将进行系统升级维护，维护时间为上午9:00-12:00。期间系统可能无法正常使用，请大家提前做好准备，给大家带来的不便敬请谅解。
          </div>
          
          <div class="post-actions">
            <button class="post-action">
              <i class="fa fa-thumbs-o-up"></i> 已阅 (28)
            </button>
            <button class="post-action reply-btn" data-style="2">
              <i class="fa fa-reply"></i> 回复 (3)
            </button>
            <button class="post-action">
              <i class="fa fa-share"></i> 分享
            </button>
          </div>
          
          <!-- 回复区域 -->
          <div class="replies-section">
            <div class="replies-title">
              <i class="fa fa-comments-o"></i> 查看回复
            </div>
            
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=5" alt="头像" class="reply-avatar">
              <div class="reply-content">
                <div class="reply-header">
                  <span class="reply-author">赵伟</span>
                  <span class="reply-time">昨天 15:25</span>
                </div>
                <div class="reply-text">
                  请问升级期间会影响移动端使用吗？
                </div>
                <div class="reply-actions">
                  <button class="reply-action reply-to-reply" data-style="2">
                    <i class="fa fa-reply"></i> 回复
                  </button>
                </div>
              </div>
            </div>
            
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=4" alt="头像" class="reply-avatar">
              <div class="reply-content">
                <div class="reply-header">
                  <span class="reply-author">技术部公告</span>
                  <span class="reply-time">昨天 15:30</span>
                </div>
                <div class="reply-text">
                  @赵伟 是的，移动端和网页端都会受到影响，整个系统将暂停服务
                </div>
                <div class="reply-actions">
                  <button class="reply-action reply-to-reply" data-style="2">
                    <i class="fa fa-reply"></i> 回复
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 回复输入区域 -->
      <div class="reply-input-area">
        <div class="reply-input-container">
          <img src="https://picsum.photos/100/100?random=9" alt="我的头像" class="reply-input-avatar">
          <div class="reply-input-wrapper">
            <textarea class="reply-input" placeholder="写下你的回复..." id="replyInput2"></textarea>
            <div class="reply-input-actions">
              <button class="cancel-reply" id="cancelReply2">取消</button>
              <button class="send-reply" id="sendReply2">回复</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格3：深色模式 -->
    <div id="style3" class="page-style">
      <!-- 顶部导航 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn3">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">消息详情</h1>
        <button class="header-btn" id="moreBtn3">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
      
      <!-- 消息内容区域 -->
      <div class="message-content" id="messageContent3">
        <!-- 消息主体 -->
        <div class="message-post">
          <div class="message-header">
            <img src="https://picsum.photos/100/100?random=6" alt="头像" class="post-avatar">
            <div>
              <div class="post-author">市场部 - 刘阳</div>
              <div class="post-time">3天前</div>
            </div>
          </div>
          
          <div class="post-content">
            我们下个月的营销活动方案已经确定，主要包含以下几个部分：
            1. 线上推广：社交媒体广告投放
            2. 线下活动：城市快闪店
            3. 用户回馈：积分兑换活动
            
            详细方案已经上传到共享文件夹，大家可以查看。有任何建议请在本周内提出。
          </div>
          
          <div class="post-actions">
            <button class="post-action">
              <i class="fa fa-thumbs-o-up"></i> 赞同 (15)
            </button>
            <button class="post-action reply-btn" data-style="3">
              <i class="fa fa-reply"></i> 回复 (7)
            </button>
            <button class="post-action">
              <i class="fa fa-download"></i> 附件
            </button>
          </div>
          
          <!-- 回复区域 -->
          <div class="replies-section">
            <div class="replies-title">
              <i class="fa fa-comments-o"></i> 查看回复
            </div>
            
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=7" alt="头像" class="reply-avatar">
              <div class="reply-content">
                <div class="reply-header">
                  <span class="reply-author">陈静</span>
                  <span class="reply-time">3天前</span>
                </div>
                <div class="reply-text">
                  快闪店的位置选好了吗？我觉得市中心的购物中心人流量会比较大
                </div>
                <div class="reply-actions">
                  <button class="reply-action">
                    <i class="fa fa-thumbs-o-up"></i> 5
                  </button>
                  <button class="reply-action reply-to-reply" data-style="3">
                    <i class="fa fa-reply"></i> 回复
                  </button>
                </div>
              </div>
            </div>
            
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=6" alt="头像" class="reply-avatar">
              <div class="reply-content">
                <div class="reply-header">
                  <span class="reply-author">市场部 - 刘阳</span>
                  <span class="reply-time">3天前</span>
                </div>
                <div class="reply-text">
                  @陈静 正在和几个购物中心洽谈，预计明天能确定最终位置
                </div>
                <div class="reply-actions">
                  <button class="reply-action reply-to-reply" data-style="3">
                    <i class="fa fa-reply"></i> 回复
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 回复输入区域 -->
      <div class="reply-input-area">
        <div class="reply-input-container">
          <img src="https://picsum.photos/100/100?random=9" alt="我的头像" class="reply-input-avatar">
          <div class="reply-input-wrapper">
            <textarea class="reply-input" placeholder="写下你的回复..." id="replyInput3"></textarea>
            <div class="reply-input-actions">
              <button class="cancel-reply" id="cancelReply3">取消</button>
              <button class="send-reply" id="sendReply3">回复</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格4：简约风格 -->
    <div id="style4" class="page-style">
      <!-- 顶部导航 -->
      <div class="page-header">
        <button class="header-btn" id="backBtn4">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="header-title">消息详情</h1>
        <button class="header-btn" id="moreBtn4">
          <i class="fa fa-ellipsis-v"></i>
        </button>
      </div>
      
      <!-- 消息内容区域 -->
      <div class="message-content" id="messageContent4">
        <!-- 消息主体 -->
        <div class="message-post">
          <div class="message-header">
            <img src="https://picsum.photos/100/100?random=8" alt="头像" class="post-avatar">
            <div>
              <div class="post-author">人力资源部</div>
              <div class="post-time">上周</div>
            </div>
          </div>
          
          <div class="post-content">
            提醒大家及时完成本月的绩效考核表，截止日期为本周五下午5点。请登录系统填写，如有疑问请联系部门主管。
          </div>
          
          <div class="post-actions">
            <button class="post-action">
              <i class="fa fa-check"></i> 已完成 (42)
            </button>
            <button class="post-action reply-btn" data-style="4">
              <i class="fa fa-reply"></i> 回复 (2)
            </button>
          </div>
          
          <!-- 回复区域 -->
          <div class="replies-section">
            <div class="replies-title">
              <i class="fa fa-comments-o"></i> 回复
            </div>
            
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=9" alt="头像" class="reply-avatar">
              <div class="reply-content">
                <div class="reply-header">
                  <span class="reply-author">我</span>
                  <span class="reply-time">3天前</span>
                </div>
                <div class="reply-text">
                  请问如果无法在截止日期前完成，需要提前申请延期吗？
                </div>
                <div class="reply-actions">
                  <button class="reply-action reply-to-reply" data-style="4">
                    <i class="fa fa-reply"></i>
                  </button>
                </div>
              </div>
            </div>
            
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=8" alt="头像" class="reply-avatar">
              <div class="reply-content">
                <div class="reply-header">
                  <span class="reply-author">人力资源部</span>
                  <span class="reply-time">3天前</span>
                </div>
                <div class="reply-text">
                  @我 是的，需要提前向主管申请并说明原因，主管同意后会统一告知我们
                </div>
                <div class="reply-actions">
                  <button class="reply-action reply-to-reply" data-style="4">
                    <i class="fa fa-reply"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 回复输入区域 -->
      <div class="reply-input-area">
        <div class="reply-input-container">
          <img src="https://picsum.photos/100/100?random=9" alt="我的头像" class="reply-input-avatar">
          <div class="reply-input-wrapper">
            <textarea class="reply-input" placeholder="回复..." id="replyInput4"></textarea>
            <div class="reply-input-actions">
              <button class="cancel-reply" id="cancelReply4">取消</button>
              <button class="send-reply" id="sendReply4">回复</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 风格切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的风格页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.page-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).style.display = 'flex';
        document.getElementById(styleId).style.flexDirection = 'column';
      });
    });
    
    // 返回按钮功能
    document.querySelectorAll('[id^="backBtn"]').forEach(btn => {
      btn.addEventListener('click', function() {
        // 返回消息列表
        alert('返回消息列表');
      });
    });
    
    // 点赞功能
    document.querySelectorAll('.post-action, .reply-action').forEach(btn => {
      if (btn.querySelector('.fa-thumbs-o-up')) {
        btn.addEventListener('click', function() {
          this.classList.toggle('active');
          const icon = this.querySelector('i');
          if (this.classList.contains('active')) {
            icon.classList.remove('fa-thumbs-o-up');
            icon.classList.add('fa-thumbs-up');
            
            // 更新数字
            if (this.textContent.trim().match(/\d+/)) {
              const count = parseInt(this.textContent.trim().match(/\d+/)[0]) + 1;
              this.innerHTML = `<i class="fa fa-thumbs-up"></i> ${this.textContent.trim().replace(/\d+/, count)}`;
            }
          } else {
            icon.classList.remove('fa-thumbs-up');
            icon.classList.add('fa-thumbs-o-up');
            
            // 更新数字
            if (this.textContent.trim().match(/\d+/)) {
              const count = parseInt(this.textContent.trim().match(/\d+/)[0]) - 1;
              this.innerHTML = `<i class="fa fa-thumbs-o-up"></i> ${this.textContent.trim().replace(/\d+/, count)}`;
            }
          }
        });
      }
    });
    
    // 回复功能
    function setupReplyFunctionality(styleNumber) {
      const input = document.getElementById(`replyInput${styleNumber}`);
      const sendBtn = document.getElementById(`sendReply${styleNumber}`);
      const cancelBtn = document.getElementById(`cancelReply${styleNumber}`);
      const contentArea = document.getElementById(`messageContent${styleNumber}`);
      const repliesSection = contentArea.querySelector('.replies-section');
      
      // 回复按钮点击事件
      document.querySelectorAll(`.reply-btn[data-style="${styleNumber}"]`).forEach(btn => {
        btn.addEventListener('click', function() {
          input.focus();
          input.placeholder = '写下你的回复...';
        });
      });
      
      // 回复特定评论
      document.querySelectorAll(`.reply-to-reply[data-style="${styleNumber}"]`).forEach(btn => {
        btn.addEventListener('click', function() {
          const author = this.closest('.reply-content').querySelector('.reply-author').textContent;
          input.focus();
          input.placeholder = `回复 @${author}...`;
          input.value = `@${author} `;
        });
      });
      
      // 发送回复
      function sendReply() {
        const text = input.value.trim();
        if (text) {
          // 创建新回复元素
          const replyDiv = document.createElement('div');
          replyDiv.className = 'reply-item';
          
          replyDiv.innerHTML = `
            <img src="https://picsum.photos/100/100?random=9" alt="我的头像" class="reply-avatar">
            <div class="reply-content">
              <div class="reply-header">
                <span class="reply-author">我</span>
                <span class="reply-time">刚刚</span>
              </div>
              <div class="reply-text">
                ${text}
              </div>
              <div class="reply-actions">
                <button class="reply-action">
                  <i class="fa fa-thumbs-o-up"></i> 0
                </button>
                <button class="reply-action reply-to-reply" data-style="${styleNumber}">
                  <i class="fa fa-reply"></i> 回复
                </button>
              </div>
            </div>
          `;
          
          // 添加到回复区域
          repliesSection.appendChild(replyDiv);
          
          // 清空输入框
          input.value = '';
          input.placeholder = '写下你的回复...';
          
          // 滚动到底部
          contentArea.scrollTop = contentArea.scrollHeight;
          
          // 为新回复绑定事件
          replyDiv.querySelector('.reply-action').addEventListener('click', function() {
            this.classList.toggle('active');
            const icon = this.querySelector('i');
            if (this.classList.contains('active')) {
              icon.classList.remove('fa-thumbs-o-up');
              icon.classList.add('fa-thumbs-up');
              this.innerHTML = '<i class="fa fa-thumbs-up"></i> 1';
            } else {
              icon.classList.remove('fa-thumbs-up');
              icon.classList.add('fa-thumbs-o-up');
              this.innerHTML = '<i class="fa fa-thumbs-o-up"></i> 0';
            }
          });
          
          replyDiv.querySelector('.reply-to-reply').addEventListener('click', function() {
            input.focus();
            input.placeholder = '回复 @我...';
            input.value = '@我 ';
          });
        }
      }
      
      // 点击发送按钮发送回复
      sendBtn.addEventListener('click', sendReply);
      
      // 取消回复
      cancelBtn.addEventListener('click', function() {
        input.value = '';
        input.placeholder = '写下你的回复...';
      });
      
      // 按Enter发送回复，Shift+Enter换行
      input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
          e.preventDefault();
          sendReply();
        }
      });
    }
    
    // 初始化所有风格的回复功能
    for (let i = 1; i <= 4; i++) {
      setupReplyFunctionality(i);
    }
    
    // 初始化 - 隐藏所有风格，只显示默认风格
    document.querySelectorAll('.page-style').forEach((style, index) => {
      if (index !== 0) {
        style.style.display = 'none';
      }
    });
  </script>
</body>
</html>
